<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        @-moz-document url-prefix(http:),
        url-prefix(https:) {
            @font-face {
                font-family: 'Arial';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: 'SimSun';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: 'SimHei';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: 'Microsoft YaHei';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: 'Microsoft YaHei UI';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: '宋体';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: '黑体';
                src: local('思源黑体 Normal');
            }

            @font-face {
                font-family: '微软雅黑';
                src: local('思源黑体 Normal');
            }
        }

        body {
            max-width: 750px;
            min-width: 320px;
            background: #ffffff;
            margin: 0 auto;
        }

        #content {
            width: 100%;
            background: url('https://img.alicdn.com/imgextra/i2/1708564976/O1CN01GvSUmX1md3brt25xf_!!1708564976.jpg');
            height: 245vw;
            margin: 0 auto;
            background-size: 100%;
            position: relative;
        }

        #xiaoxie {
            width: 100%;
            height: 226vw;
            position: absolute;
            left: 0;
            top: 47.6vw;
            display: none;
        }

        #xiaoxie img {
            width: 100%;
            display: block;
        }

        #btn {
            width: 20vw;
            height: 20vw;
            position: absolute;
            left: 11.2vw;
            top: 102.6vw;
            /* background-color: blue; */
        }

        #xiaoxie2 {
            width: 100%;
            height: 226vw;
            position: absolute;
            left: 0;
            top: 47.6vw;
            display: none;
        }

        #xiaoxie2 img {
            width: 100%;
            display: block;
        }

        #btn2 {
            width: 75vw;
            height: 20vw;
            position: absolute;
            left: 11.2vw;
            top: 118vw;
            /* background-color: blue; */
        }
    </style>
    <title></title>
</head>

<body>


    <div id="content">
        <div id="xiaoxie">
            <img src="https://img.alicdn.com/imgextra/i3/1708564976/O1CN01DIs8cv1md3bn7zMvB_!!1708564976.png" alt="">
            <div id="btn"></div>
        </div>
        <div id="xiaoxie2">
            <img src="https://img.alicdn.com/imgextra/i3/1708564976/O1CN01w84rqc1md3bqHDykq_!!1708564976.png" alt="">
            <a href="./03.html">
                <div id="btn2"></div>
            </a>
        </div>

    </div>
</body>
<SCRIPT>
    // window.onload = function () {
    const xiaoxie = document.querySelector("#xiaoxie");
    const xiaoxie2 = document.querySelector("#xiaoxie2");
    const btn = document.querySelector("#btn");
    const btn2 = document.querySelector("#btn2");
    setTimeout(function () {
        xiaoxie.style.display = "block";

    }, 2000)

    btn.addEventListener('click', function () {
        xiaoxie.style.display = "none";
        xiaoxie2.style.display = "block";
    })

    // }
</SCRIPT>


</html>